import React, {useContext} from 'react';
import classes from './Counter.module.css'
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faPlus,faMinus} from "@fortawesome/free-solid-svg-icons";
import CartContext from "../../store/CartContext.jsx";

const Counter = (props) => {

    const ctx = useContext(CartContext)
    const addButtonHandler = () => {
        ctx.cartDispatch({type:'ADD',meal:props.meal})
    }
    const subButtonHandler = () => {
        ctx.cartDispatch({type:'REMOVE',meal:props.meal})
    }
    return (
        <div className={classes.counter}>
            {
                (props.meal.count && props.meal.count !== 0) ?
                    <>
                        <button className={classes.sub} onClick={subButtonHandler}>
                            <FontAwesomeIcon icon={faMinus}/>
                        </button>
                        <span className={classes.count}>{props.meal.count}</span>
                    </>
                    : null
            }

            <button className={classes.add} onClick={addButtonHandler}>
                <FontAwesomeIcon icon={faPlus}/>
            </button>
        </div>
    );
};

export default Counter;
